<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md">
      <div class="container mx-auto px-4 py-4">
        <div class="flex justify-between items-center">
          <div class="flex items-center">
            <i class="fas fa-book text-primary text-2xl mr-2"></i>
            <span class="text-xl font-bold text-primary">网上书城</span>
          </div>
          
          <div class="flex items-center space-x-4">
            <span class="text-gray-600">欢迎，{{ userStore.userInfo?.username }}</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link cursor-pointer">
                <el-avatar :size="32" :src="userStore.userInfo?.avatar">
                  <i class="fas fa-user"></i>
                </el-avatar>
                <i class="fas fa-chevron-down ml-1"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
      <div class="text-center">
        <h1 class="text-3xl font-bold text-gray-800 mb-4">
          欢迎来到网上书城
        </h1>
        <p class="text-gray-600 mb-8">
          您已成功登录，用户类型：{{ getUserTypeText() }}
        </p>
        
        <!-- 功能卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="text-primary text-4xl mb-4">
              <i class="fas fa-book-open"></i>
            </div>
            <h3 class="text-lg font-semibold mb-2">浏览图书</h3>
            <p class="text-gray-600">发现精选图书，开启阅读之旅</p>
          </div>
          
          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="text-primary text-4xl mb-4">
              <i class="fas fa-shopping-cart"></i>
            </div>
            <h3 class="text-lg font-semibold mb-2">购物车</h3>
            <p class="text-gray-600">管理您的购物清单</p>
          </div>
          
          <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
            <div class="text-primary text-4xl mb-4">
              <i class="fas fa-user-circle"></i>
            </div>
            <h3 class="text-lg font-semibold mb-2">个人中心</h3>
            <p class="text-gray-600">管理个人信息和订单</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 获取用户类型文本
const getUserTypeText = () => {
  switch (userStore.userRole) {
    case 'admin':
      return '管理员'
    case 'merchant':
      return '商家'
    case 'user':
    default:
      return '普通用户'
  }
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人资料功能开发中...')
      break
    case 'settings':
      ElMessage.info('设置功能开发中...')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 处理登出
const handleLogout = () => {
  userStore.logout()
  ElMessage.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.el-dropdown-link {
  display: flex;
  align-items: center;
  color: #606266;
}

.el-dropdown-link:hover {
  color: #FF6B8B;
}
</style>
